<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文明-历史-非遗 AI设计提示词生成器</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 主红色
                        secondary: '#8B0000', // 深红色
                        accent: '#FFD700', // 金色作为强调色
                        neutral: {
                            100: '#F9FAFB',
                            200: '#F3F4F6',
                            300: '#E5E7EB',
                            800: '#1F2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Noto Serif SC', 'serif']
                    }
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .focus-ring {
                @apply focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
        }
    </style>
    
    <style>
        /* 全局样式 */
        body {
            scroll-behavior: smooth;
        }
        
        /* 加载动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 滚动条美化 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #c41e3a80;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #C41E3A;
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-custom">
        <nav class="container mx-auto px-4 py-4 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-university text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-neutral-900">文遗AI提示词生成器</h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-neutral-800 hover:text-primary transition-custom">首页</a>
                <a href="#features" class="text-neutral-800 hover:text-primary transition-custom">功能</a>
                <a href="#about" class="text-neutral-800 hover:text-primary transition-custom">关于</a>
                <a href="#" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-secondary transition-custom">使用帮助</a>
            </div>
            
            <!-- 移动端汉堡菜单 -->
            <button class="md:hidden text-neutral-800 focus:outline-none" id="menuToggle">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </nav>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden bg-white border-t animate-fade-in" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#" class="text-neutral-800 hover:text-primary py-2 transition-custom">首页</a>
                <a href="#features" class="text-neutral-800 hover:text-primary py-2 transition-custom">功能</a>
                <a href="#about" class="text-neutral-800 hover:text-primary py-2 transition-custom">关于</a>
                <a href="#" class="bg-primary text-white px-4 py-2 rounded-md hover:bg-secondary text-center transition-custom">使用帮助</a>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 页面标题 -->
        <div class="text-center mb-12 animate-fade-in" style="animation-delay: 0.1s;">
            <h2 class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-neutral-900 mb-4">
                文明·历史·非遗 主题<br class="md:hidden">网页设计提示词生成器
            </h2>
            <p class="text-neutral-600 max-w-2xl mx-auto text-lg">
                快速生成专业的AI设计提示词，打造具有传统文化韵味的现代网页
            </p>
        </div>
        
        <!-- 主要内容区 - 多列布局 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- 第一部分：网页总体要求 -->
            <div class="lg:col-span-3 md:col-span-1 animate-fade-in" style="animation-delay: 0.2s;">
                <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-file-text-o text-primary mr-2"></i>
                        网页总体要求
                    </h3>
                    <p class="text-neutral-600 mb-4 text-sm">
                        输入网页的基本功能和主要内容，描述您想要创建的网页的核心目标和用途
                    </p>
                    <textarea 
                        id="generalRequirements" 
                        class="w-full h-32 p-4 border border-neutral-300 rounded-lg focus:outline-none focus-ring-2 focus-ring-primary/50 resize-none transition-custom"
                        placeholder="例如：创建一个展示中国传统刺绣技艺的网页，包含刺绣历史、代表作品展示、传承人介绍等功能..."
                    ></textarea>
                </div>
            </div>
            
            <!-- 第二部分：详细配置选项 -->
            <div class="lg:col-span-2 animate-fade-in" style="animation-delay: 0.3s;">
                <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-6 flex items-center">
                        <i class="fa fa-sliders text-primary mr-2"></i>
                        详细配置选项
                    </h3>
                    
                    <!-- 导航系统配置 - 改为单选 -->
                    <div class="mb-8">
                        <h4 class="font-medium text-lg mb-3 text-neutral-900">导航系统</h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="navigation" value="顶部导航栏" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>顶部导航栏</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="navigation" value="侧边导航栏" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>侧边导航栏</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="navigation" value="移动端汉堡菜单" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>移动端汉堡菜单</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="navigation" value="面包屑导航" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>面包屑导航</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 页面布局配置 - 改为单选 -->
                    <div class="mb-8">
                        <h4 class="font-medium text-lg mb-3 text-neutral-900">页面布局</h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="layout" value="单列布局" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>单列布局</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="layout" value="多列布局" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>多列布局</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="layout" value="网格布局" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>网格布局</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="radio" name="layout" value="卡片式布局" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>卡片式布局</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 色彩体系配置 -->
                    <div class="mb-8">
                        <h4 class="font-medium text-lg mb-3 text-neutral-900">色彩体系</h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="color" value="青铜色系" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>青铜色系</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="color" value="瓷器白色系" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>瓷器白色系</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="color" value="青花蓝色系" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>青花蓝色系</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="color" value="中国红色系" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>中国红色系</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="color" value="鎏金色系" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>鎏金色系</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="color" value="扎染蓝色系" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>扎染蓝色系</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 字体与排版配置 -->
                    <div class="mb-8">
                        <h4 class="font-medium text-lg mb-3 text-neutral-900">字体与排版</h4>
                        <div class="mb-4">
                            <h5 class="font-medium mb-2 text-neutral-800">标题字体</h5>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                    <input type="radio" name="titleFont" value="书法体" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                    <span>书法体</span>
                                </label>
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                    <input type="radio" name="titleFont" value="宋体" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                    <span>宋体</span>
                                </label>
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                    <input type="radio" name="titleFont" value="楷体" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                    <span>楷体</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <h5 class="font-medium mb-2 text-neutral-800">排版风格</h5>
                            <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                    <input type="radio" name="typography" value="古籍式排版" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                    <span>古籍式排版</span>
                                </label>
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                    <input type="radio" name="typography" value="现代横排排版" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                    <span>现代横排</span>
                                </label>
                                <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                    <input type="radio" name="typography" value="错落式排版" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                    <span>错落式排版</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 视觉元素配置 -->
                    <div class="mb-8">
                        <h4 class="font-medium text-lg mb-3 text-neutral-900">视觉元素</h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="visual" value="云纹装饰" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>云纹装饰</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="visual" value="回纹装饰" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>回纹装饰</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="visual" value="龙纹元素" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>龙纹元素</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="visual" value="凤纹元素" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>凤纹元素</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="visual" value="文物旋转展示" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>文物旋转展示</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="visual" value="非遗技艺动画" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>非遗技艺动画</span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 内容模块配置 - 已更新 -->
                    <div>
                        <h4 class="font-medium text-lg mb-3 text-neutral-900">内容模块</h4>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="content" value="文物展示模块" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>文物展示模块</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="content" value="非遗传承模块" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>非遗传承模块</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="content" value="历史文明模块" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>历史文明模块</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="content" value="推荐模块" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>推荐模块</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="content" value="代表人物" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>代表人物</span>
                            </label>
                            <label class="flex items-center p-3 border border-neutral-300 rounded-lg cursor-pointer hover:border-primary transition-custom">
                                <input type="checkbox" name="content" value="奇闻趣事" class="mr-3 h-4 w-4 text-primary focus:ring-primary">
                                <span>奇闻趣事</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 第三部分：生成的AI提示词 -->
            <div class="animate-fade-in" style="animation-delay: 0.4s;">
                <div class="bg-white rounded-xl shadow-sm p-6 h-full card-hover flex flex-col">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <i class="fa fa-magic text-primary mr-2"></i>
                        生成的AI提示词
                    </h3>
                    <p class="text-neutral-600 mb-4 text-sm">
                        根据您的输入和配置自动生成的提示词，可直接用于AI设计工具
                    </p>
                    
                    <textarea 
                        id="generatedPrompt" 
                        class="w-full flex-grow p-4 border border-neutral-300 rounded-lg focus:outline-none focus-ring-2 focus-ring-primary/50 resize-none transition-custom mb-4"
                        placeholder="生成的提示词将显示在这里..."
                        readonly
                    ></textarea>
                    
                    <button 
                        id="copyButton" 
                        class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-secondary transition-custom flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-primary/50"
                    >
                        <i class="fa fa-copy mr-2"></i>
                        复制提示词
                    </button>
                    
                    <div id="copyFeedback" class="hidden mt-3 text-center text-sm py-2 rounded-lg"></div>
                </div>
            </div>
        </div>
        
        <!-- 功能特点部分 -->
        <section id="features" class="mt-16 animate-fade-in" style="animation-delay: 0.5s;">
            <h3 class="text-2xl font-bold text-center mb-10">功能特点</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-sliders text-primary text-xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">丰富配置选项</h4>
                    <p class="text-neutral-600">
                        提供全面的网页设计配置选项，涵盖导航、布局、色彩、字体等多个维度，满足各类文明历史非遗主题网页设计需求。
                    </p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-magic text-primary text-xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">智能提示词生成</h4>
                    <p class="text-neutral-600">
                        根据您的配置自动生成专业、精准的AI提示词，无需专业知识也能创作出高质量的设计描述。
                    </p>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4">
                        <i class="fa fa-mobile text-primary text-xl"></i>
                    </div>
                    <h4 class="font-semibold text-lg mb-2">全设备适配</h4>
                    <p class="text-neutral-600">
                        生成的提示词默认包含响应式设计要求，确保您的网页在电脑、平板和手机等各类设备上都有出色表现。
                    </p>
                </div>
            </div>
        </section>
        
        <!-- 关于部分 -->
        <section id="about" class="mt-16 bg-white p-8 rounded-xl shadow-sm animate-fade-in" style="animation-delay: 0.6s;">
            <h3 class="text-2xl font-bold mb-6">关于本工具</h3>
            <p class="text-neutral-600 mb-4">
                本工具专为创建中华文明、历史文物和非物质文化遗产相关主题的网页设计提示词而开发，旨在帮助设计师和开发者快速生成专业、精准的AI设计指令。
            </p>
            <p class="text-neutral-600">
                通过结合传统美学元素与现代网页设计标准，您可以轻松创建既具有文化底蕴又符合现代用户体验的优秀网页作品，为传统文化的传播和传承贡献力量。
            </p>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-neutral-900 text-white mt-16">
        <div class="container mx-auto px-4 py-10">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa fa-university text-primary text-2xl"></i>
                        <h3 class="text-xl font-bold">文遗AI提示词生成器</h3>
                    </div>
                    <p class="text-neutral-400">
                        助力传统文化数字化传播的现代工具
                    </p>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-neutral-400 hover:text-primary transition-custom">首页</a></li>
                        <li><a href="#features" class="text-neutral-400 hover:text-primary transition-custom">功能</a></li>
                        <li><a href="#about" class="text-neutral-400 hover:text-primary transition-custom">关于</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-primary transition-custom">使用帮助</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-4">合规信息</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-neutral-400 hover:text-primary transition-custom">隐私政策</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-primary transition-custom">使用条款</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-primary transition-custom">无障碍声明</a></li>
                        <li><a href="#" class="text-neutral-400 hover:text-primary transition-custom">ICP备案信息</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-neutral-800 mt-8 pt-8 text-center text-neutral-500 text-sm">
                <p>© 2023 文遗AI提示词生成器 - 传承文明，连接古今</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // DOM元素引用
        const menuToggle = document.getElementById('menuToggle');
        const mobileMenu = document.getElementById('mobileMenu');
        const generalRequirements = document.getElementById('generalRequirements');
        const generatedPrompt = document.getElementById('generatedPrompt');
        const copyButton = document.getElementById('copyButton');
        const copyFeedback = document.getElementById('copyFeedback');
        const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
        const allRadios = document.querySelectorAll('input[type="radio"]');
        
        // 需要添加到提示词后的固定文本
        const additionalText = "请确保设计风格符合中华传统美学，同时兼顾现代用户体验，界面元素应融入传统纹样元素，色彩搭配应体现传统文化特色。";
        
        // 移动端菜单切换
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 生成提示词函数
        function generatePrompt() {
            // 获取总体要求
            const generalReq = generalRequirements.value.trim() || '创建一个关于中华文明、历史文物或非遗传承的网页。';
            
            // 获取选中的导航系统选项（单选）
            const navigationOption = document.querySelector('input[name="navigation"]:checked')?.value || '适合主题的导航系统';
            const navigationText = `导航系统采用：${navigationOption}。`;
            
            // 获取选中的页面布局选项（单选）
            const layoutOption = document.querySelector('input[name="layout"]:checked')?.value || '适合内容展示的布局';
            const layoutText = `页面布局使用：${layoutOption}。`;
            
            // 获取选中的色彩体系选项
            const colorOptions = Array.from(document.querySelectorAll('input[name="color"]:checked'))
                .map(checkbox => checkbox.value);
            const colorText = colorOptions.length > 0 
                ? `色彩体系采用：${colorOptions.join('、')}，体现传统文化韵味。`
                : '色彩体系应体现中华传统文化特色。';
            
            // 获取选中的标题字体
            const titleFont = document.querySelector('input[name="titleFont"]:checked')?.value || '适合主题的字体';
            const titleFontText = `标题字体使用${titleFont}，体现传统与现代的结合。`;
            
            // 获取选中的排版风格
            const typography = document.querySelector('input[name="typography"]:checked')?.value || '适合主题的排版';
            const typographyText = `排版风格采用${typography}，提升内容可读性和视觉美感。`;
            
            // 获取选中的视觉元素选项
            const visualOptions = Array.from(document.querySelectorAll('input[name="visual"]:checked'))
                .map(checkbox => checkbox.value);
            const visualText = visualOptions.length > 0 
                ? `视觉元素包括：${visualOptions.join('、')}，增强传统文化氛围。`
                : '融入适当的传统视觉元素，增强文化氛围。';
            
            // 获取选中的内容模块选项（已更新）
            const contentOptions = Array.from(document.querySelectorAll('input[name="content"]:checked'))
                .map(checkbox => checkbox.value);
            const contentText = contentOptions.length > 0 
                ? `包含以下内容模块：${contentOptions.join('、')}，全面展示主题内容。`
                : '包含适合主题的内容模块，全面展示相关信息。';
            
            // 拼接生成提示词（不含附加文本，附加文本在复制时添加）
            const prompt = `请设计一个网页，${generalReq} ${navigationText} ${layoutText} ${colorText} ${titleFontText} ${typographyText} ${visualText} ${contentText} 设计应兼顾传统美学与现代用户体验，确保响应式布局适配各种设备，动画效果应简洁优雅，突出主题内容而不喧宾夺主。不使用线上图片，可以使用线上图标。整体风格应体现中华文明的深厚底蕴和独特魅力。
其他技术说明：
- 使用现代Web技术（HTML5, CSS3, JavaScript ES6+）
- 确保响应式设计，适配各种设备
- 代码结构清晰，注释完整
- 遵循Web标准和最佳实践`;
            
            // 更新生成的提示词文本框
            generatedPrompt.value = prompt;
        }
        
        // 复制提示词函数 - 包含添加固定文本的功能
        function copyToClipboard() {
            if (!generatedPrompt.value) {
                showFeedback('请先生成提示词', 'error');
                return;
            }
            
            // 生成包含附加文本的完整提示词
            const fullPrompt = `${generatedPrompt.value} ${additionalText}`;
            
            // 创建临时文本区域用于复制
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = fullPrompt;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            document.execCommand('copy');
            document.body.removeChild(tempTextArea);
            
            // 显示成功反馈
            showFeedback('提示词已成功复制到剪贴板', 'success');
        }
        
        // 显示反馈信息
        function showFeedback(message, type) {
            copyFeedback.textContent = message;
            copyFeedback.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800');
            
            if (type === 'success') {
                copyFeedback.classList.add('bg-green-100', 'text-green-800');
            } else {
                copyFeedback.classList.add('bg-red-100', 'text-red-800');
            }
            
            // 3秒后隐藏反馈
            setTimeout(() => {
                copyFeedback.classList.add('hidden');
            }, 3000);
        }
        
        // 事件监听器 - 输入变化时生成提示词
        generalRequirements.addEventListener('input', generatePrompt);
        allCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', generatePrompt);
        });
        allRadios.forEach(radio => {
            radio.addEventListener('change', generatePrompt);
        });
        
        // 事件监听器 - 复制按钮点击
        copyButton.addEventListener('click', copyToClipboard);
        
        // 初始生成一个默认提示词
        window.addEventListener('load', generatePrompt);
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 如果是移动端，点击后关闭菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // 导航栏滚动效果
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-4');
            } else {
                header.classList.add('py-4');
                header.classList.remove('py-2', 'shadow');
            }
        });
    </script>
</body>
</html>
    